<template>
<div>
  <a-popover trigger="click" position="br">
    <a-button>
      <template #icon>
        <icon-settings />
      </template>
    </a-button>
    <template #title>
        列设置 <a-button :size="'mini'" :shape="'circle'" @click="onReset"><icon-refresh /></a-button>
    </template>
    <template #content>
      <div>
        <a-checkbox-group v-model="selected" direction="vertical" @change="onUpdate">
          <a-checkbox v-for="col in fixed.filter(col => col.dataIndex)" :key="col.dataIndex" :value="col.dataIndex">
            {{ col.title }}
          </a-checkbox>
        </a-checkbox-group>
      </div>
    </template>
  </a-popover>
</div>
</template>

<script>
export default {
  name: "TableColumnSetting",
  props: {
    columns: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  emits: ['update:columns'],
  data() {
    return {
      selected: [],
      fixed: []
    }
  },
  mounted() {
    this.fixed = this.columns
    this.onReset()
  },
  methods: {
    onUpdate() {
      this.$emit('update:columns', this.fixed.filter(col => this.selected.includes(col.dataIndex)))
    },
    onReset() {
      this.selected = this.fixed.filter(col => !col.hidden).map(col => col.dataIndex)
      this.onUpdate()
    }
  }
};
</script>

<style scoped>

</style>
